<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="container">
    <!-- 工程列表 -->
    <n-data-table size="small" :max-height="250" :columns="Columns" :pagination="Pagination" :data="Store.projectList" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { h, reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
import { NButton } from "naive-ui";
import type { DataTableColumns } from "naive-ui";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 组件引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  // 🌱 工程
  onGetCurrentProject, // 获取当前工程
  onProjectNew, // 新建工程
  onProjectGetList, // 获取工程列表
  onGetProject, // 获取工程
  onProjectDelete, // 删除工程
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useProjectStore } from "@/store/projectStore"; // 工程

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const projectStore = useProjectStore(); // 工程

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 存储 */
let Store = reactive({
  /** 工程列表 */
  projectList: computed(() => projectStore.projectList),
  /** 工程键 */
  ProjectKey: computed(() => projectStore.key),
});
/** 列标 */
let Columns = [
  {
    title: "工程名称",
    key: "label",
    sorter: "default",
  },
  {
    title: "保存时间",
    key: "calendar",
    sorter: "default",
  },
  {
    title: "控制",
    key: "ctrls",
    width: 230,
    render(Row: RowData) {
      if (Row.key !== Store.ProjectKey) {
        return [
          h(
            NButton,
            {
              style: { marginLeft: "6px" },
              size: "small",
              type: "success",
              onClick: () => onGetProject(Row.key),
            },
            { default: () => "设置当前工程" }
          ),
          h(
            NButton,
            {
              style: { marginLeft: "6px" },
              size: "small",
              type: "error",
              onClick: () => onProjectDelete(Row.key),
            },
            { default: () => "删除工程" }
          ),
        ];
      } else {
        return [
          h(
            "div",
            {
              style: { marginLeft: "6px" },
              size: "small",
            },
            { default: () => "此工程为当前工程" }
          ),
        ];
      }
    },
  },
];
/** 分页 */
let Pagination: {
  pageSize: 1000;
};
/** 行数据定义 */
type RowData = {
  table: string; // 名称
  key: string; // 键或Id
  val: string; // 变量
};
/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

// 容器
.container {
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  user-select: none;
}
</style>
